<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100vh;
        width: 100vw;
    }

    #canvas {
        border: 1px solid black;
        width: 800px;
        height: 600px;
        overflow: hidden;
    }
</style>

<body>

    <canvas id="canvas" width="800" height="600">
        Your browser does not support canvas
    </canvas>
    <br>

    <script>
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')

        function render() {
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.save()
            ctx.translate(400, 300)
            ctx.rotate(-Math.PI / 2)
            ctx.save()
            ctx.beginPath()
            ctx.arc(0, 0, 250, 0, Math.PI * 2)
            ctx.lineWidth = 2
            ctx.strokeStyle = 'skyblue'
            ctx.stroke()
            ctx.closePath()
            ctx.beginPath()
            ctx.arc(0, 0, 220, 0, Math.PI * 2)
            ctx.stroke()
            ctx.closePath()
            // 绘制小时的刻度
            ctx.restore()
            ctx.save()
            // 绘制小时的刻度
            for (let i = 0; i < 12; i++) {
                ctx.beginPath()
                ctx.moveTo(200, 0)
                ctx.lineTo(220, 0)
                ctx.lineWidth = 6
                ctx.strokeStyle = 'black'
                ctx.rotate(Math.PI / 6)
                ctx.stroke()
                ctx.closePath()
            }
            ctx.restore()
            ctx.save()
            // 分秒刻度
            for (let i = 0; i < 60; i++) {
                ctx.beginPath()
                ctx.moveTo(210, 0)
                ctx.lineTo(220, 0)
                ctx.lineWidth = 3
                ctx.strokeStyle = 'black'
                ctx.rotate(Math.PI / 30)
                ctx.stroke()
                ctx.closePath()
            }
            ctx.restore()
            ctx.save()

            let time = new Date()
            let hours = time.getHours()
            let minutes = time.getMinutes()
            let seconds = time.getSeconds()
            hour = hours > 12 ? hours - 12 : hours
            // 秒针
            ctx.rotate(2 * Math.PI / 60 * seconds)
            ctx.beginPath()
            ctx.moveTo(-20, 0)
            ctx.lineTo(195, 0)
            ctx.lineWidth = 2
            ctx.strokeStyle = 'red'
            ctx.stroke()
            ctx.closePath()
            ctx.restore()
            ctx.save()
            // 分针
            ctx.rotate(2 * Math.PI / 60 * minutes)
            ctx.beginPath()
            ctx.moveTo(-20, 0)
            ctx.lineTo(190, 0)
            ctx.lineWidth = 4
            ctx.strokeStyle = 'black'
            ctx.stroke()
            ctx.closePath()
            ctx.restore()
            ctx.save()
            // 时针
            ctx.rotate(2 * Math.PI / 12 * hour)
            ctx.beginPath()
            ctx.moveTo(-20, 0)
            ctx.lineTo(160, 0)
            ctx.lineWidth = 10
            ctx.strokeStyle = 'black'
            ctx.stroke()
            ctx.closePath()
            ctx.restore()
            // 中心
            ctx.beginPath()
            ctx.arc(0, 0, 10, 0, Math.PI * 2)
            ctx.fillStyle = 'black'
            ctx.fill()
            ctx.closePath()
            ctx.restore()
            requestAnimationFrame(render)
        }
        render()

    </script>

</body>

</html>